<template>
    <div>
        <BasicDialogVue :data="dialog" @close="onCloseDialog(formRef)">
            <template #content>
                <el-form :model="formData" label-width="100px" :rules="rules" ref="formRef">
                    <el-form-item label="用户角色：" prop="roles">
                        <el-checkbox-group v-model="formData.roles">
                            <el-checkbox :label="item.value" v-for="item in list" :key="item" style="width: 120px">{{
                                item.label
                            }}</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                </el-form>
                <div class="btn">
                    <el-button @click="onCloseDialog(formRef)">取消</el-button>
                    <el-button type="primary" @click="submitForm(formRef)">确定</el-button>
                </div>
            </template>
        </BasicDialogVue>
    </div>
</template>
<script setup lang="ts">
import { roleList } from '@/apis/company/role'
import { allocationRole, userInfo } from '@/apis/company/user'
import BasicDialogVue from '@/components/baseDialog/Index.vue'
import { ElMessage, FormInstance } from 'element-plus'
import { ref, reactive, watchEffect } from 'vue'
const props = defineProps(['data'])
const emit = defineEmits(['close'])
const formRef = ref<FormInstance>()
const dialog = reactive({
    visible: false,
    title: '授权角色',
    width: '800px',
    id: '',
    type: 'create'
})

//角色列表
const list = reactive([
    { label: '工程师', value: '1' },
    { label: '产品经理', value: '2' },
    { label: '销售员', value: '3' }
])
const formData: { roles: string[]; id: string } = reactive({
    roles: [],
    id: ''
})

const rules = reactive({
    roles: [{ required: false, message: '请选择角色', trigger: 'change' }]
})

let resubmit = false

watchEffect(() => {
    dialog.visible = props.data.visible
    if (props.data.visible) {
        formData.id = props.data.id
        roleList().then(res => {
            if (Number(res.data.code) === 200) {
                list.length = 0
                res.data.result.forEach((item: any) => {
                    list.push({ label: item.name, value: item.id })
                })
            }
        })
        userInfo(props.data.id).then(res => {
            if (Number(res.data.code) === 200) {
                formData.roles.length = 0

                res.data.result.roles.forEach((item: any) => {
                    formData.roles.push(item.id)
                })
            }
        })
    }
})

//监听关闭
const onCloseDialog = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    emit('close')
}
//监听提交
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return

    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!', formData)
            if (resubmit) {
                return
            }
            resubmit = true
            allocationRole(formData.id, formData.roles).then(
                res => {
                    resubmit = false
                    if (Number(res.data.code) === 200) {
                        ElMessage.success('授权成功')
                        emit('close')
                    }
                },
                () => {
                    resubmit = false
                }
            )
        } else {
            console.log('error submit!', fields)
        }
    })
}
</script>
<style scoped lang="scss">
.btn {
    display: flex;
    justify-content: center;
    margin: 40px 0 16px 0;
}
</style>
